<template>
  <div
    :class="single ? 'single-alarm-container' : 'alarm-container'"
    id="alarm-content"
    v-show="visible"
    :style="single ? 'left: 34%;top:170px' : 'left: 38.5%;top:200px'"
  >
    <div class="alarm-container-header">
      <!--  展开  -->
      <img
        v-if="expandStatus"
        style="width: 34px"
        src="/public/img/cockpit/expand.png"
        @click="changeExpand"
      />
      <!--  收起  -->
      <img
        v-if="!expandStatus"
        style="width: 34px"
        src="/public/img/cockpit/retract.png"
        @click="changeExpand"
      />
    </div>
    <div class="alarm-content" v-if="expandStatus && alarmList.length > 0">
      <div class="alarm-time">
        <div>
          <span style="margin-right: 20px">
            {{ dataFormat(alarmList[0].createTime, "YYYY-MM-DD HH:mm:ss") }}
          </span>
          <span style="margin-right: 20px">
            {{ alarmList[0].model }}
          </span>
          <span v-if="alarmList[0].droneSerialId">
            {{ alarmList[0].droneSerialId }}
          </span>
        </div>
        <div class="look-detail" @click="tabsClick(alarmList[0])">
          <img src="/public/img/cockpit/eyes.png" alt="" />
          <span>查看详情</span>
        </div>
      </div>
      <div class="alarm-word">
        <div>
          <span>事件：</span>
          <span class="alarmEvent">{{ alarmNameNum }}</span>
        </div>
        <div>
          <span>地址：</span>
          <!--          <span>{{ alarmList[0].address }}</span>-->
          <span>{{ alarmAddress || alarmList[0].discoveryPlace || "-" }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps, onMounted, reactive, ref } from "vue";
import { dataFormat } from "@/utils/format";

const expandStatus = ref(true);
const emits = defineEmits(["isTabsShow"]);
const props = defineProps({
  single: {
    type: Boolean,
    default: false,
  },
  visible: {
    type: Boolean,
    default: false,
  },
  alarmNameNum: {
    type: String,
    default: "",
  },
  alarmAddress: {
    type: String,
    default: "",
  },
});

const alarmList = reactive([
  {
    createTime: "2024-01-14 17:17:35",
    model: "DJI Mavic 3",
    droneSerialId: "",
    alartType: "",
    discoveryPlace: "浙江省杭州市临平区乔司街道东城丽景东城丽景公寓",
  },
]);

function changeExpand() {
  expandStatus.value = !expandStatus.value;
  if (expandStatus.value === false) {
    // 展开
    if (alarmList.value.length > 5) {
      document.getElementById("alarm-content").style.height = "343px";
      // document.getElementById("alarm-content").style.overflowY = "scroll";
    } else {
      // document.getElementById("alarm-content").style.height = "auto";
    }
  } else if (expandStatus.value === true) {
    // 收起
    if (props.single) {
      document.getElementById("alarm-content").style.height = "79px";
    } else {
      document.getElementById("alarm-content").style.height = "97px";
    }
    document.getElementById("alarm-content").style.overflow = "hidden";
  }
}

function tabsClick(val) {
  expandStatus.value = true;
  if (props.single) {
    document.getElementById("alarm-content").style.height = "79px";
  } else {
    document.getElementById("alarm-content").style.height = "97px";
  }
  emits("isTabsShow");
  // flyTaskStore.openTabs("first", null, val.flyApplyId, null, val.droneUK);
}

onMounted(() => {
  console.log("props.single", props.single)
  if (expandStatus.value === true) {
    // 收起
    if (props.single) {
      document.getElementById("alarm-content").style.height = "79px";
    } else {
      document.getElementById("alarm-content").style.height = "97px";
    }
    document.getElementById("alarm-content").style.overflow = "hidden";
  }
});
</script>
<style lang="scss" scoped>
.single-alarm-container {
  position: absolute;
  z-index: 99;
  width: 630px;
  max-height: 474px;
  background: rgba(255, 0, 0, 0.25);
  border: 1px solid #ff0000;
  padding: 5px 20px 2px;
  border-radius: 4px;
  color: #ffffff;
  top: 3%;
  // // overflow-y: scroll;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(255, 0, 0, 1);
    background: rgba(255, 0, 0, 1);
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.2);
  }

  .alarm-container-header {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0px;
  }
  .alarm-divider {
    border-bottom: 1px rgba(255, 255, 255, 0.3) dashed;
  }

  .alarm-content {
    padding-bottom: 11px;
    margin-bottom: 11px;
    margin-top: -5px;

    .alarm-time {
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .look-detail {
        width: 106px;
        height: 26px;
        padding: 5px 12px 5px 12px;
        background: rgba(255, 192, 0, 0.3);
        border: 1px solid #ffc000;
        border-radius: 4px;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #e6e6e6;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
      }
    }
    .alarm-word {
      display: flex;
      font-size: 12px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #e6e6e6;

      div:nth-child(2) {
        margin-left: 20px;
        //display: flex;
        width: 463px;
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 显示省略号 */
      }
    }
    .alarm-word div {
      margin-top: 5px;
      min-width: 260px;
      cursor: pointer;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出部分 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
  }
}

.alarm-container {
  position: absolute;
  z-index: 99;
  width: 960px;
  max-height: 474px;
  background: rgba(255, 0, 0, 0.25);
  border: 1px solid #ff0000;
  padding: 5px 20px 2px;
  border-radius: 4px;
  color: #ffffff;
  top: 3%;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  // overflow-y: scroll;
  // backdrop-filter: blur(5px);
  // -webkit-backdrop-filter: blur(5px);

  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(255, 0, 0, 1);
    background: rgba(255, 0, 0, 1);
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4);
    border-radius: 0;
    background: rgba(0, 0, 0, 0.2);
  }

  .alarm-container-header {
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0px;
  }
  .alarm-content {
    padding-bottom: 11px;
    margin-bottom: 10px;
    //border-bottom: 1px rgba(255, 255, 255, 0.3) dashed;

    .alarm-time {
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 400;
      display: flex;
      justify-content: space-between;

      .look-detail {
        width: 106px;
        height: 26px;
        padding: 7px 12px 5px 13px;
        background: rgba(255, 192, 0, 0.3);
        border: 1px solid #ffc000;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #e6e6e6;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
      }
    }
    .alarm-word {
      display: flex;
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #e6e6e6;

      // .alarmEvent {
      //   display: block;
      //   width: 300px;
      // }

      div:nth-child(2) {
        margin-left: 20px;
      }
    }
    .alarm-word div {
      margin-top: 5px;
    }
  }
}
</style>
